<template>
    <div class="p-16px w-full">
        <div class="pt-26px w-full content-container">
            <div class="pl-26px pr-26px words-container">
                <el-row :gutter="26">
                    <el-col :span="12">
                        <Area :rule-form="ruleForm" />
                    </el-col>
                    <el-col :span="12">
                        <FrontKeyword :rule-form="ruleForm" />
                    </el-col>
                </el-row>
                <el-row :gutter="26" class="mt-26px">
                    <el-col :span="12">
                        <MainKeyword :rule-form="ruleForm" />
                    </el-col>
                    <el-col :span="12">
                        <BackKeyword :rule-form="ruleForm" />
                    </el-col>
                </el-row>
            </div>
            <CustomizeKeyword :rule-form="ruleForm" />
            <div class="pl-26px pb-40px">
                <el-button :loading="loading" type="primary" @click="handleNext">确认提交</el-button>
            </div>
            <ConfirmWord v-model:isConfirmDialogVisible="isConfirmDialogVisible" :rule-form="ruleForm"
                @closeDialog="handleClose" />
        </div>
    </div>
</template>

<script setup lang="ts">
import CustomizeKeyword from './components/CustomizeKeyword.vue'
import Area from './components/Area.vue'
import FrontKeyword from './components/FrontKeyword.vue'
import MainKeyword from './components/MainKeyword.vue'
import BackKeyword from './components/BackKeyword.vue'
import ConfirmWord from './components/ConfirmWord.vue'
import { getProjectKeywordApi } from '@/api/whiteList'
import { useHead } from '@vueuse/head'

const ruleForm = reactive({
    id: 0,
    area: '',
    city: '',
    frontWords: [],
    mainWords: [],
    backWords: [],
    cusKeyword: '',
    deleteWord: '',
})

const isConfirmDialogVisible = ref(false)

const loading = ref(false)

async function handleNext() {
    //空数据过滤掉
    loading.value = false
    isConfirmDialogVisible.value = true
}

async function getProjectKeyword() {
    try {
        const res: ResType = await getProjectKeywordApi()
        if (res.code === 200) {
            ruleForm.frontWords = res.leftkeydata
            ruleForm.backWords = res.rightkeydata
            ruleForm.mainWords = res.mainkeydata
            ruleForm.deleteWord = res.deletekeydata.join('/')
            ruleForm.cusKeyword = res.data.CusKeyword || ''
            ruleForm.id = res.data.ID || 0
        }
    } catch (error: any) {
        console.log(error)
    }
}

//查找arr1的项是否是arr2的label,如果不是就将该项添加到arr2的首位去
function addMissingItemsToFrontOptimized(arr1: any, arr2: any) {
    // 创建 arr2 所有 label 的集合
    const labelSet = new Set(arr2.map((obj: any) => obj.label));
    // 创建 arr2 的副本
    const newArr2 = [...arr2];
    // 创建要添加的项（反向顺序）
    const itemsToAdd = [];
    let proxyCity: { label: string; value: number } = { label: '', value: 0 };
    // 遍历 arr1 找出缺失项
    for (const item of arr1) {
        if (!labelSet.has(item)) {
            proxyCity = new Proxy({ label: item, value: 1,customize:true }, {});
            itemsToAdd.unshift(proxyCity);
        }
    }
    // 将缺失项添加到数组开头
    newArr2.unshift(...itemsToAdd);
    return newArr2;
}

async function handleClose() {
    loading.value = false
    isConfirmDialogVisible.value = false
    //取消上一次删除关键词的操作
    const res: ResType = await getProjectKeywordApi()
    if (res.code === 200) {
        ruleForm.deleteWord = res.deletekeydata.join('/')
    }
}

watch(() => ruleForm.city, (newVal) => {
    //将选中的城市数据加到前置词里
    if (newVal.length) {
        const citys = newVal.split('/')
        const labelSet = new Set(ruleForm.frontWords.map((obj: any) => obj.label));
        for (const item of citys) {
            if (!labelSet.has(item)) {
                ruleForm.frontWords = addMissingItemsToFrontOptimized(citys, ruleForm.frontWords) as any
            }
        }
    }
})

useHead({
    title: 'GEO：引擎之上，生成万象 - 兴旺宝',
})

onMounted(() => {
    getProjectKeyword()
})


</script>

<style scoped>
:deep(.el-checkbox-group) {
    display: flex;
    flex-direction: column;
}
</style>